<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <script src="vue-2.6.12开发.js"></script>
    
</head>
<!-- 总结:
    1.使用Vue 必须创建一个Vue实例 并传入一个配置对象
    2.root容器里的代码依然符合html的规范 只不过混入一些特殊的Vue语法
    3.root容器里的代码被称为【Vue模版】
    4.Vue实例和容器是一一对应的
    5.真实开发中只有一个Vue实例,并且会配合着组件一起使用
    6.{{xxx}}中的xxx要写 js表达式,且xxx可以自动读取到data中的所有属性
    7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新

    注意区分: js表达式 和 js代码(语句)
    
       1.js表达式:一个表达式会产生一个值 可以放在任何一个需要值的地方
                (1) a
                (2) a+b
                (3) demo(1)
                (4) x===y ? 'a' : 'b'

       2.js代码(语句):控制代码走向 
                (1) if(){}
                (2) for(){}        
 -->

<div id="root">
    <h1>初识Vue,{{address}},{{name.toUpperCase()}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false//阻止 Vue 在启动时生成 生产提示
    new Vue({
        el: '#root',//el 对应dom标签
        data: {//date存储数据 数据供el所指向的标签使用
           
            name: 'pink',
            address:'河南信阳'

        }
    })
    
</script>

<body>

</body>

</html>